<template>
    <div>
  
        <div style="margin-top: 20px;">
            <el-card v-for="(item, index) in list" @click="toDetail(item.id)">
                <div class="title">{{ item.title }}</div>
                <div class="info">{{ item.writer }}</div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    title: 'OpenAI 首次开发者日：GPT 商店要来了',
                    writer: 'writer',
                    isLike: 0,
                    content: '333'
                },
                {
                    id: 2,
                    title: '九问中国大模型掌门人',
                    writer: 'writer',
                    isLike: 0,
                    content: 'wwww'
                },
                {
                    id: 3,
                    title: '两种技术乱象：为什么前者更容易让程序员背锅？',
                    writer: 'writer',
                    isLike: 0,
                    content: 'wwwww'
                },
                {
                    id: 4,
                    title: '李开复领队开源大模型 Yi',
                    writer: 'writer',
                    isLike: 0,
                    content: 'www'
                },
                {
                    id: 5,
                    title: 'PyTorch创始人：开源成功的方法论',
                    writer: 'writer',
                    isLike: 0,
                    content: 'www'
                },
            ],
            input: ''
        }
    },
    created() {
        if (!localStorage.getItem("news")) {
            localStorage.setItem("news", JSON.stringify(this.list))
        } else {
            this.list = JSON.parse(localStorage.getItem("news"))
        }
    },
    methods: {
        toDetail(id) {
            console.log(id);
            this.$router.push({
                path: '/detail',
                query: {
                    id: id
                }
            })
        }
    }
}
</script>

<style scoped>
li {
    list-style: none;
    background-color: #ddd;
    padding: 20px 10px;
}

.list {
    padding-left: 0px;
}

.info {
    margin-top: 15px;
}

.el-card {
    margin-top: 10px;
}
</style>